<template>
    <div>
        <el-container style="height: 100vh;">
            <el-aside width="200px" style="height: 100%; overflow: auto;">
                <div style="display: flex; align-items: center;">
                    <img src="../assets/logo.png" style="width: 80px; height: 50px;" />
                    <h1 class="tms-title">TMS物流系统</h1>
                </div>

                <!-- 侧边栏 -->
                <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                    active-text-color="#ffd04b">

                    <el-submenu :index="menu.id + ''" v-for="menu in menuList" :key="menu.id">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            <span>{{ menu.name }}</span>
                        </template>

                        <!-- 子菜单项，点击后通过路由跳转 -->
                        <el-menu-item v-for="c in menu.childrenMenu" :key="c.id" :index="c.url"
                            @click="handleMenuClick(c.url)">
                            {{ c.name }}</el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container style="flex-grow: 1;">
                <el-header
                    style="height: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; gap: 15px;">
                    <!-- 头部 -->
                    <el-button icon="el-icon-bell" size="mini" circle @click="xiaoXi"></el-button>
                    <!-- 默认头像 -->
                    <el-avatar size="small"
                        :src="qqqq"></el-avatar>
                    <el-dropdown style="font-size: medium;" @command="handleCommand">
                        <span class="el-dropdown-link">
                            尊敬的：{{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a"><i class="el-icon-user-solid"></i>个人资料</el-dropdown-item>
                            <el-dropdown-item command="b"><i class="el-icon-s-tools"></i>重置密码</el-dropdown-item>
                            <el-dropdown-item command="c"><i class="el-icon-remove-outline"></i>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>

                <el-main style="height: calc(100% - 60px); overflow: auto;">
                    <!-- 主页面 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>






        <!-- 密码弹窗 -->
        <el-dialog title="重置密码" :visible.sync="MimaVisible">
            <el-form>

                <el-form-item label="您的账号" label-width="80px">
                    <el-input v-model="username" :disabled="true"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="MimaVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveBtn">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        let userInfo = localStorage.getItem("userInfo");
        let username = "";  // 初始化 username 为空
        if (userInfo) {
            // 解析 JSON，提取 username
            userInfo = JSON.parse(userInfo);
            username = userInfo.username;
        }

        return {
            username: username,  // 将 username 存入 data
            menuList: [],  // 动态菜单列表
            MimaVisible: false,
            qqqq:'',
        };  
    },

    methods: {
        queryMenu() {
            // 查询用户菜单请求
            this.$axios.get("api/menu/queryPowerUserMenu")
                .then(resp => {
                    console.log(resp.data);
                    this.menuList = resp.data.data;
                });
        },

        // 处理菜单点击事件，根据路径跳转页面
        handleMenuClick(url) {
            if (url) {
                this.$router.push(url).catch(err => err);  // 使用 Vue Router 进行跳转
            }
        },

        handleCommand(command) {
            // command 是下拉菜单的标识
            if (command == 'a') {
                // 个人中心
                this.$router.push({ path: '/personal' });
            } else if (command == 'b') {
                // 修改密码
                this.MimaVisible = true;
            } else if (command == 'c') {
                // 退出登录
                this.$axios.post('api/powerUser/signOut', { username: this.username })
                    .then(response => {
                        if (response.data.code == 200) {
                            localStorage.removeItem("authorization"); //清除jwt
                            localStorage.removeItem("userInfo"); // 清除用户信息
                            this.$router.push("/login"); // 重定向到登录页面
                        }
                    });
            }
        },
        saveBtn() {
            this.$axios.post('api/powerUser/resetPassword', { username: this.username })
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            message: '密码重置成功',
                            type: 'success'
                        });
                        this.MimaVisible = false;//关闭对话框
                    } else {
                        this.$message.error('密码重置失败');
                    }
                })
        },

        xiaoXi(){
            this.$router.push('/message');
        },
        qqq(){
            this.qqqq = this.$route.query.lujin;
        }
    },

    created() {
        this.qqq()
        this.queryMenu();  // 调用菜单查询方法
    },
};
</script>

<style scoped>
.el_menu {
    border-bottom: none;
    /* 去掉菜单下划线 */
}

.el-header,
.el-footer {
    background-color: #D3DCE6;
    color: #333;
}

.el-aside {
    background-color: #545c64;
    color: #333;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
}

/** 标题样式 */
.tms-title {
    color: aliceblue; /* 字体颜色 */
    font-size: 27px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-align: center; /* 居中显示 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影效果 */
    margin-top: 20px; /* 上方间距 */
    font-family: 'Arial', sans-serif; /* 字体 */
}

</style>
